@charset "utf-8";

@function r($px){
    @return ($px/40) * 1rem;
}
@function px($px){
    @return ($px/2) * 1px;
}   

#web{
    width: r(750);
    height: 100%;
    position: relative;
}
header{
    border: 1px solid transparent;
    width: 100%;
    height: 61.5px;
    .back{
        margin-left: px(23);
        margin-top: px(48);
        font-size: px(26);
        text-align: center;
        line-height: px(55);
        width: px(122);
        height: px(55);
        border: 1px solid #ff9344;
        border-radius: 17px;
    }
    .fenlei-p{
        display: inline-block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-top: px(62);
        font-size: px(26);
        text-align: center;
    }
    .selectbar{
        
        margin-right: px(20);
        text-indent: 5px;
        margin-top: px(48);
        width: 79px;
        height: 27px;
        border: 1px solid #FF9344;
        select{
            background: white;
            width: 94%;
            height:100%;
            border:none;    
            outline: none;
            vertical-align: top;
            //去除默认样式
            appearance:none;
            -webkit-appearance: none;
            background-image: url(../img/sjx_09.jpg);
            background-repeat: no-repeat;
            background-size: 15px 8px;
            background-position: right 6px center;
        }
    }
}
.session{
    position: absolute;
    top:63.5px;
    bottom: px(136);
    left: 0;
    right: 0; 
     //纵向滚动
     overflow-y: scroll;
    //弹性滚动
    -webkit-overflow-scrolling: touch;
    .searchbar{
        width: r(264);
        height: 25px;
        border: 1px solid #ff9344;
        border-radius: 25px;
        margin: 0 auto;
        margin-top: px(40);
        padding:0 5px;
        font-size: 0;
        box-sizing: border-box;
        input{
            text-align: center;
            font-size: px(24);
            border-radius: 7px;
            display: inline-block;
            vertical-align: middle;
            border: none;
            width: calc(100% - 24px);
            height: 100%;
        }
        img{
            vertical-align: middle;
            width: 18px;
            height: 18px;
        }
    }
    .session-p{
        margin-bottom: r(15);
        margin-top: r(34);
        text-align: center;
        font-size: px(26);
    }
    .faxian-ul{
        padding: 0 r(113);
        li{
            border: 1px solid white;
            font-size: px(20);
            width: r(124);
            height: r(63);
            background: #dcdcdc;
            text-align: center;
            line-height: r(63);
        }
    }
    .iconfont{
       font-size: 16px;
      color: #ff9344;
  }
    .common-top{
       margin-top: r(35);
       p{
           margin-right: r(18);
           margin-top: r(21);
           display: inline-block;
           float: right;
           font-size: px(24);
       }
      img{
          margin-left: r(23);
          vertical-align: middle;
          width: r(41);
          height: r(46);
      }
       h3{
           display: inline-block;
           font-size: px(30);
       }
     }
     .hotso1{
         margin-top: r(37);
         position: relative;
         height: r(352);
         >div{
             font-size: 0;
             display: inline-block;
             img{
                 width: 100%;
             }
         }
         .hs-1{
             margin-left: r(23);
             width:r(279);
             height: r(351);
         }
         .hs-2{
             vertical-align: top;
             width: r(407);
             height: r(141);
         }
         .hs-3{
             position: absolute;
             right: r(243);
             bottom: 0;
             width: r(194);
             height: r(198);
         }
         .hs-4{
             right: r(29.5);
             bottom: 0;
             position: absolute;
             width: r(207);
             height: r(198);
         }
     }
     .hotso2{
         margin-top: r(37);
         >div{
             font-size: 0;
             display: inline-block;
             >img{
                 width: 100%;
             }
         }
         .hotimg1{
             margin-left: r(18);
             width: r(225);
             height: r(199);
         }
         .hotimg2{
             margin-left: r(18);
             width: r(210);
             height: r(199);
         }
         .hotimg3{
             margin-left: r(18);
             width: r(217);
             height: r(199);
         }
     }
}
footer{
    width:r(750);
    height: px(136);
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 0;
    li{
        margin-top: px(17);
        text-align: center;
        width: 25%;
        a{
            color:black;
        }
        p{
            font-size:px(26);
        }
    }
}